﻿<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>HzyAdminUI</title>
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <!-- 移动设备 viewport -->
    <meta name="viewport"
        content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui">
    <!-- 360浏览器默认使用Webkit内核 -->
    <meta name="renderer" content="webkit">
    <!-- 禁止搜索引擎抓取 -->
    <meta name="robots" content="nofollow">
    <!-- 禁止百度SiteAPP转码 -->
    <meta http-equiv="Cache-Control" content="no-siteapp">
    <!-- Chrome浏览器添加桌面快捷方式（安卓） -->
    <meta name="mobile-web-app-capable" content="yes">
    <!-- Safari浏览器添加到主屏幕（IOS） -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="">
    <!--[if lt IE 9]>
              <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
              <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
            <![endif]-->
    <link href="../../css/web-icons-master/css/web-icons.css" rel="stylesheet" />
    <!--样式-->
    <link href="../../css/fontawesome-free/css/all.min.css" rel="stylesheet">
    <link href="../../css/bootstrap.min.css" rel="stylesheet" />
    <link href="../../css/core.css" rel="stylesheet" />
    <link href="../../css/site.css" rel="stylesheet" />
</head>

<body>
    <div class="page page-forms">
        <div class="page-header">
            <h1 class="page-title">质感风格</h1>
            <ol class="breadcrumb">
                <li class="breadcrumb-item">
                    <a>首页</a>
                </li>
                <li class="breadcrumb-item">
                    <a href="javascript:;">表单</a>
                </li>
                <li class="active">质感风格</li>
            </ol>
        </div>
        <div class="page-content container-fluid">
            <div class="row">
                <div class="col-md-6">

                    <div class="panel">
                        <div class="panel-heading">
                            <h3 class="panel-title">静态标签</h3>
                        </div>
                        <div class="panel-body container-fluid">
                            <form autocomplete="off">
                                <div class="form-group form-material">
                                    <label class="col-form-label" for="inputText">文本框</label>
                                    <input type="text" class="form-control" id="inputText" name="inputText"
                                        placeholder="文本框">
                                </div>
                                <div class="form-group form-material">
                                    <label class="col-form-label" for="inputEmail">Email</label>
                                    <input type="email" class="form-control" id="inputEmail" name="inputEmail"
                                        placeholder="邮箱">
                                </div>
                                <div class="form-group form-material">
                                    <label class="col-form-label" for="inputPassword">密码</label>
                                    <input type="password" class="form-control" id="inputPassword" name="inputPassword"
                                        placeholder="密码">
                                </div>
                                <div class="form-group form-material form-material-file">
                                    <label class="col-form-label" for="inputFile">文件域</label>
                                    <input type="text" class="form-control" placeholder="请选择文件.." readonly="">
                                    <input type="file" id="inputFile" name="inputFile" multiple="">
                                </div>
                                <div class="form-group form-material">
                                    <label class="col-form-label" for="textarea">文本域</label>
                                    <textarea class="form-control" id="textarea" name="textarea" rows="3"></textarea>
                                </div>
                                <div class="form-group form-material">
                                    <label class="col-form-label" for="select">下拉菜单</label>
                                    <select class="form-control" id="select">
                                        <option>1</option>
                                        <option>2</option>
                                        <option>3</option>
                                        <option>4</option>
                                        <option>5</option>
                                    </select>
                                </div>
                                <div class="form-group form-material">
                                    <label class="col-form-label" for="selectMulti">下拉菜单（多选）</label>
                                    <select class="form-control" id="selectMulti" multiple="">
                                        <option>1</option>
                                        <option>2</option>
                                        <option>3</option>
                                        <option>4</option>
                                        <option>5</option>
                                    </select>
                                </div>
                                <div class="form-group form-material">
                                    <label class="col-form-label" for="inputDisabled">文本框（禁用）</label>
                                    <input type="text" class="form-control" id="inputDisabled" placeholder="禁用"
                                        disabled="">
                                </div>
                                <div class="form-group form-material">
                                    <label class="col-form-label" for="inputFocus">文本框（获得焦点）</label>
                                    <input type="text" class="form-control focus" id="inputFocus" placeholder="获得焦点">
                                </div>
                                <div class="form-group form-material has-warning">
                                    <label class="col-form-label" for="inputWarning">文本框（警告）</label>
                                    <input type="text" class="form-control" id="inputWarning" placeholder="警告">
                                </div>
                                <div class="form-group form-material has-danger">
                                    <label class="col-form-label" for="inputError">文本框（错误）</label>
                                    <input type="text" class="form-control" id="inputError" placeholder="错误">
                                </div>
                                <div class="form-group form-material has-success">
                                    <label class="col-form-label" for="inputSuccess">文本框（成功）</label>
                                    <input type="text" class="form-control" id="inputSuccess" placeholder="成功">
                                </div>
                                <div class="form-group form-material has-info">
                                    <label class="col-form-label" for="inputInfo">文本框（信息）</label>
                                    <input type="text" class="form-control" id="inputInfo" placeholder="信息">
                                </div>
                                <div class="form-group form-material">
                                    <label class="col-form-label" for="inputSmall">小尺寸</label>
                                    <input type="text" class="form-control form-control-sm" id="inputSmall"
                                        name="inputSmall" placeholder="小尺寸">
                                </div>
                                <div class="form-group form-material">
                                    <label class="col-form-label" for="inputSmall">默认尺寸</label>
                                    <input type="text" class="form-control" id="inputDefault" name="inputDefault"
                                        placeholder="默认">
                                </div>
                                <div class="form-group form-material">
                                    <label class="col-form-label" for="inputSmall">大尺寸</label>
                                    <input type="text" class="form-control form-control-lg" id="inputLarge"
                                        name="inputLarge" placeholder="大尺寸">
                                </div>
                                <div class="form-group form-material">
                                    <label class="col-form-label" for="inputHint">提示</label>
                                    <input type="text" class="form-control" id="inputHint" name="inputHint"
                                        placeholder="获得焦点时显示提示信息" data-hint="我是一个比较帅气的文本框">
                                    <div class="hint">我是一个比较帅气的文本框</div>
                                </div>
                                <div class="form-group form-material">
                                    <label class="col-form-label" for="inputAddons">附加组件</label>
                                    <div class="input-group">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text">¥</span>
                                        </div>
                                        <div class="form-control-wrap">
                                            <input type="text" class="form-control" id="inputAddons">
                                        </div>
                                        <span class="input-group-append">
                                            <button class="btn btn-outline btn-default" type="button">按钮</button>
                                        </span>
                                    </div>
                                </div>
                                <div class="form-group form-material row">
                                    <div class="col-md-6">
                                        <label class="col-form-label" for="inputGrid1">栅格</label>
                                        <input type="text" class="form-control" id="inputGrid1" name="inputGrid1"
                                            placeholder=".col-md-6">
                                    </div>
                                    <div class="col-md-6">
                                        <label class="col-form-label" for="inputGrid2">栅格</label>
                                        <input type="text" class="form-control" id="inputGrid2" name="inputGrid2"
                                            placeholder=".col-md-6">
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>

                </div>
                <div class="col-md-6">

                    <div class="panel">
                        <div class="panel-heading">
                            <h3 class="panel-title">浮动标签</h3>
                        </div>
                        <div class="panel-body container-fluid">
                            <form autocomplete="off">
                                <div class="form-group form-material floating">
                                    <input type="text" class="form-control empty" name="inputFloatingText">
                                    <label class="floating-label">文本框</label>
                                </div>
                                <div class="form-group form-material floating">
                                    <input type="email" class="form-control" name="inputFloatingEmail">
                                    <label class="floating-label">邮箱</label>
                                </div>
                                <div class="form-group form-material floating">
                                    <input type="password" class="form-control" name="inputFloatingPassword">
                                    <label class="floating-label">密码</label>
                                </div>
                                <div class="form-group form-material floating form-material-file">
                                    <input type="text" class="form-control empty" readonly="">
                                    <input type="file" name="inputFloatingFile" multiple="">
                                    <label class="floating-label">请选择文件..</label>
                                </div>
                                <div class="form-group form-material floating">
                                    <textarea class="form-control empty" rows="3" name="textareaFloating"></textarea>
                                    <label class="floating-label">文本域</label>
                                </div>
                                <div class="form-group form-material floating">
                                    <select class="form-control">
                                        <option>&nbsp;</option>
                                        <option>1</option>
                                        <option>2</option>
                                        <option>3</option>
                                        <option>4</option>
                                        <option>5</option>
                                    </select>
                                    <label class="floating-label">下拉框</label>
                                </div>
                                <div class="form-group form-material floating">
                                    <label class="floating-label floating-label-static">下拉框（多选）</label>
                                    <select class="form-control" multiple="">
                                        <option>1</option>
                                        <option>2</option>
                                        <option>3</option>
                                        <option>4</option>
                                        <option>5</option>
                                    </select>
                                </div>
                                <div class="form-group form-material floating">
                                    <input type="text" class="form-control empty" disabled="">
                                    <label class="floating-label">禁用</label>
                                </div>
                                <div class="form-group form-material floating">
                                    <input type="text" class="form-control focus empty">
                                    <label class="floating-label">获得焦点</label>
                                </div>
                                <div class="form-group form-material floating has-warning">
                                    <input type="text" class="form-control empty">
                                    <label class="floating-label">警告</label>
                                </div>
                                <div class="form-group form-material floating has-danger">
                                    <input type="text" class="form-control empty">
                                    <label class="floating-label">错误</label>
                                </div>
                                <div class="form-group form-material floating has-success">
                                    <input type="text" class="form-control empty">
                                    <label class="floating-label">成功</label>
                                </div>
                                <div class="form-group form-material floating has-info">
                                    <input type="text" class="form-control empty">
                                    <label class="floating-label">信息</label>
                                </div>
                                <div class="form-group form-material floating">
                                    <input type="text" class="form-control form-control-sm empty"
                                        name="inputFloatingSmall">
                                    <label class="floating-label">小尺寸</label>
                                </div>
                                <div class="form-group form-material floating">
                                    <input type="text" class="form-control empty" name="inputFloatingSmall">
                                    <label class="floating-label">默认尺寸</label>
                                </div>
                                <div class="form-group form-material floating">
                                    <input type="text" class="form-control form-control-lg empty"
                                        name="inputFloatingLarge">
                                    <label class="floating-label">大尺寸</label>
                                </div>
                                <div class="form-group form-material floating">
                                    <input type="text" class="form-control empty" name="inputFloatingHint"
                                        data-hint="这是一个很帅的提示">
                                    <div class="hint">这是一个很帅的提示</div>
                                    <label class="floating-label">提示</label>
                                </div>
                                <div class="form-group form-material floating">
                                    <div class="input-group">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text">¥</span>
                                        </div>
                                        <div class="form-control-wrap">
                                            <input type="text" class="form-control empty">
                                            <label class="floating-label">附加组件</label>
                                        </div>
                                        <span class="input-group-append">
                                            <button class="btn btn-outline btn-default" type="button">按钮</button>
                                        </span>
                                    </div>
                                </div>
                                <div class="form-group form-material floating row">
                                    <div class="col-sm-6">
                                        <input type="text" class="form-control empty" name="inputFloatingGrid1">
                                        <label class="floating-label">栅格</label>
                                    </div>
                                    <div class="col-sm-6">
                                        <input type="text" class="form-control empty" name="inputFloatingGrid2">
                                        <label class="floating-label">栅格</label>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
    <!--脚本-->
    <script src="../../libs/jquery/jquery-3.2.1.min.js"></script>
    <script src="../../libs/bootstrap/js/bootstrap.bundle.min.js"></script>
</body>

</html>